<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to emulate the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // --- Draw the main components ---

        // 1. Outer insulated container
        const outerRect = { x: 50, y: 90, width: 450, height: 200 };
        ctx.strokeRect(outerRect.x, outerRect.y, outerRect.width, outerRect.height);

        // 2. Inner container
        const innerRect = { x: 70, y: 110, width: 410, height: 160 };
        ctx.strokeRect(innerRect.x, innerRect.y, innerRect.width, innerRect.height);

        // 3. Partition separating V1 and V2
        const partitionX = innerRect.x + 150;
        ctx.beginPath();
        ctx.moveTo(partitionX, innerRect.y);
        ctx.lineTo(partitionX, innerRect.y + innerRect.height);
        ctx.stroke();

        // --- Add labels and text ---

        // 4. Label for V1 (using Greek letter nu: ν)
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Draw 'ν' for volume 1
        ctx.font = "italic 40px 'Times New Roman'";
        const v1_x = innerRect.x + (partitionX - innerRect.x) / 2;
        const v1_y = innerRect.y + innerRect.height / 2;
        ctx.fillText('\u03BD', v1_x - 5, v1_y); // \u03BD is the Unicode for ν
        
        // Draw subscript '1'
        ctx.font = "24px 'Times New Roman'";
        ctx.fillText('1', v1_x + 18, v1_y + 10);

        // 5. Label for V2
        // Draw 'ν' for volume 2
        ctx.font = "italic 40px 'Times New Roman'";
        const v2_x = partitionX + (innerRect.x + innerRect.width - partitionX) / 2;
        const v2_y = innerRect.y + innerRect.height / 2;
        ctx.fillText('\u03BD', v2_x - 5, v2_y);

        // Draw subscript '2'
        ctx.font = "24px 'Times New Roman'";
        ctx.fillText('2', v2_x + 18, v2_y + 10);

        // 6. Label for "insulated container"
        ctx.font = "28px sans-serif";
        const labelText = 'insulated container';
        const labelX = 320;
        const labelY = 50;
        ctx.fillText(labelText, labelX, labelY);

        // 7. Pointer line from label to container
        const pointerStart = { x: 280, y: 65 };
        const pointerEnd = { x: 270, y: 90 };
        
        ctx.beginPath();
        ctx.moveTo(pointerStart.x, pointerStart.y);
        // A gentle curve for the squiggly line
        ctx.quadraticCurveTo(pointerStart.x - 10, pointerStart.y + 15, pointerEnd.x, pointerEnd.y);
        ctx.stroke();

        // Draw arrowhead
        const arrowAngle = Math.atan2(pointerEnd.y - (pointerStart.y + 15), pointerEnd.x - (pointerStart.x - 10));
        const arrowLength = 12;
        ctx.beginPath();
        ctx.moveTo(pointerEnd.x, pointerEnd.y);
        ctx.lineTo(pointerEnd.x - arrowLength * Math.cos(arrowAngle - Math.PI / 6), pointerEnd.y - arrowLength * Math.sin(arrowAngle - Math.PI / 6));
        ctx.moveTo(pointerEnd.x, pointerEnd.y);
        ctx.lineTo(pointerEnd.x - arrowLength * Math.cos(arrowAngle + Math.PI / 6), pointerEnd.y - arrowLength * Math.sin(arrowAngle + Math.PI / 6));
        ctx.stroke();

        // 8. Figure caption
        ctx.font = "bold 24px 'Times New Roman'";
        ctx.fillText('Fig. 1.2.', canvas.width / 2, outerRect.y + outerRect.height + 50);

    </script>
</body>
</html>